<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>a</title>
	</head>
	<body>
		<button id="openBpage">打开b页面</button>
		<button id="send">发送广播(同源非当前页)</button>
		<button id="off">关闭广播</button>
		<button id="setStorage">setStorage(同源非当前页)</button>
		<button id="messageToB">postMessage to b (可跨域)</button>
		<script>
			// 打开b页面用于消息通信.
			openBpage.onclick=() => window.bPage=window.open('b.html');

			// 创建一个监听“internal_notification”通道的新通道。
			const bc=new BroadcastChannel('internal_notification');

			//监听该频道消息
			bc.addEventListener('message',(event) => {
				console.log('BroadcastChannel_message',event);
			});

			//发送一条任意类型的消息,给非当前页面监听“internal_notification”通道的广播对象。
			send.onclick=() => {
				bc.postMessage({a: 'a'});
			};

			off.onclick=() => {
				//关闭该广播,也不能再发送和接收消息
				bc.close();
			};

			// 修改localStorage,只能被同源非当前页面接收
			setStorage.onclick=() => {
				localStorage.setItem('storageMessage',Math.random()+'');
			};
			// 监听storage事件,只能接收同源且非当前页面
			window.addEventListener('storage',function(e) {
				console.log('storage__message',e);
			});

			// postMessage可以用于非同源窗口的消息通信
			messageToB.onclick=() => {
				//第二个参数指定哪些窗口能接收到消息事件,值可以是字符串"*"（表示无限制）或者一个 URI。
				bPage.postMessage('sendMessageToB',B_URL);
			};

			//可以接收来自非同源页面的消息
			window.addEventListener('message',(e) => {
				console.log('收到来自',e.origin,'的消息:',e.data);
			});
		</script>
	</body>
</html>
